<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案件分析 - 消防大模型应用平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
     
</head>
<body class="bg-gray-50">
    <!-- 导航栏 -->
    <nav class="bg-blue-600 text-white shadow-lg">
        <div class="max-w-7xl mx-auto px-4">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <i class="fas fa-fire-extinguisher text-2xl mr-2"></i>
                    <span class="text-xl font-bold">消防大模型应用平台</span>
                </div>
                <div class="hidden md:flex space-x-4">
                    <a href="index.html" class="hover:bg-blue-700 px-3 py-2 rounded">首页</a>
                    <a href="knowledge.html" class="hover:bg-blue-700 px-3 py-2 rounded">知识库</a>
                    <a href="report.html" class="hover:bg-blue-700 px-3 py-2 rounded">报告生成</a>
                    <a href="analysis.html" class="bg-blue-700 px-3 py-2 rounded">案件分析</a>
                    <a href="reasoning.html" class="hover:bg-blue-700 px-3 py-2 rounded">推理分析</a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容区 -->
    <main class="max-w-7xl mx-auto px-4 py-8">
        <div class="flex justify-between items-center mb-8">
            <h1 class="text-3xl font-bold text-gray-800">案件分析</h1>
            <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
                <i class="fas fa-plus mr-2"></i>新建分析
            </button>
        </div>

        <!-- 案件选择 -->
        <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
            <h2 class="text-2xl font-bold mb-6">选择案件</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-gray-700 mb-2">案件编号</label>
                    <input type="text" class="w-full px-4 py-2 border rounded-lg" placeholder="请输入案件编号">
                </div>
                <div>
                    <label class="block text-gray-700 mb-2">案件类型</label>
                    <select class="w-full px-4 py-2 border rounded-lg">
                        <option>火灾事故</option>
                        <option>爆炸事故</option>
                        <option>其他事故</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- 分析结果展示 -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <!-- 时间线分析 -->
            <div class="bg-white rounded-lg shadow-lg p-6">
                <h2 class="text-2xl font-bold mb-6">案情时间线</h2>
                <div id="timelineChart" class="h-96"></div>
            </div>

            <!-- 关系图谱 -->
            <div class="bg-white rounded-lg shadow-lg p-6">
                <h2 class="text-2xl font-bold mb-6">关系图谱</h2>
                <div id="relationChart" class="h-96"></div>
            </div>

            <!-- 串供分析 -->
            <div class="bg-white rounded-lg shadow-lg p-6">
                <h2 class="text-2xl font-bold mb-6">串供分析</h2>
                <div class="space-y-4">
                    <div class="border rounded-lg p-4">
                        <h3 class="font-semibold mb-2">可疑陈述</h3>
                        <p class="text-gray-600">发现3处可疑陈述，可能存在串供行为</p>
                        <div class="mt-4">
                            <button class="text-blue-600 hover:text-blue-800">
                                <i class="fas fa-search mr-1"></i>查看详情
                            </button>
                        </div>
                    </div>
                    <div class="border rounded-lg p-4">
                        <h3 class="font-semibold mb-2">时间线矛盾</h3>
                        <p class="text-gray-600">2处时间线描述存在矛盾</p>
                        <div class="mt-4">
                            <button class="text-blue-600 hover:text-blue-800">
                                <i class="fas fa-search mr-1"></i>查看详情
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 分析报告 -->
            <div class="bg-white rounded-lg shadow-lg p-6">
                <h2 class="text-2xl font-bold mb-6">分析报告</h2>
                <div class="space-y-4">
                    <div class="border rounded-lg p-4">
                        <h3 class="font-semibold mb-2">关键发现</h3>
                        <ul class="list-disc list-inside text-gray-600 space-y-2">
                            <li>发现3处可疑陈述</li>
                            <li>2处时间线矛盾</li>
                            <li>1个关键人物关系异常</li>
                        </ul>
                    </div>
                    <div class="border rounded-lg p-4">
                        <h3 class="font-semibold mb-2">建议措施</h3>
                        <ul class="list-disc list-inside text-gray-600 space-y-2">
                            <li>对可疑人员进行重点询问</li>
                            <li>核实时间线矛盾点</li>
                            <li>深入调查异常关系</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white mt-12">
        <div class="max-w-7xl mx-auto px-4 py-8">
            <div class="text-center">
                <p>© 2024 消防大模型应用平台. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script>
        // 初始化时间线图表
        const timelineChart = echarts.init(document.getElementById('timelineChart'));
        timelineChart.setOption({
            title: {
                text: '案件时间线'
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'time'
            },
            yAxis: {
                type: 'category',
                data: ['事件1', '事件2', '事件3', '事件4']
            },
            series: [{
                type: 'scatter',
                data: [
                    ['2024-03-15 10:00', 0],
                    ['2024-03-15 11:30', 1],
                    ['2024-03-15 13:00', 2],
                    ['2024-03-15 14:30', 3]
                ]
            }]
        });

        // 初始化关系图谱
        const relationChart = echarts.init(document.getElementById('relationChart'));
        relationChart.setOption({
            title: {
                text: '关系图谱'
            },
            tooltip: {},
            series: [{
                type: 'graph',
                layout: 'force',
                data: [
                    {name: '张三', symbolSize: 50},
                    {name: '李四', symbolSize: 40},
                    {name: '王五', symbolSize: 40},
                    {name: '赵六', symbolSize: 30}
                ],
                links: [
                    {source: '张三', target: '李四'},
                    {source: '李四', target: '王五'},
                    {source: '王五', target: '赵六'}
                ],
                roam: true,
                label: {
                    show: true
                },
                force: {
                    repulsion: 100
                }
            }]
        });
    </script>
</body>
</html> 